
<template>
	<view class="content" @tap.stop="$refs.uniselect.close()">
        <u-navbar :fixed="true" :safeAreaInsetTop="true" :placeholder="true" @leftClick="back" :title="jurisdiction.title">
            <view class="u-flex" slot="right">
                <u-icon class="u-m-r-16" name="plus" size="20" @tap="add"></u-icon>
                <u-icon name="edit-pen" size="24" @tap="batch"></u-icon>
                <!-- <u-icon name="search" size="26" @tap="search"></u-icon> -->
            </view>
        </u-navbar>
        <view class="uniselect" :style="{top:systemInfo.headerH+'px'}">
            <uni-select ref="uniselect" bgColor="#fff" :selectData="selectData" @select="select"></uni-select>
        </view>
        <view style="height:74rpx"></view>

        <view class="uni-area" :style="{paddingBottom:popupShow?'140rpx':0}">
            <u-checkbox-group @change="checkboxChange">
                <u-swipe-action>
                    <u-swipe-action-item class="u-m-t-30 tem" v-for="(tem,ind) in page.list" :key="ind"
                        :options="tem.options" :disabled="disabled" @click="click" :name="tem.status+'&'+tem.id+'&'+ind">
                        <u-checkbox v-if="disabled" :disabled="tem.status!=1" size="18" class="u-m-l-24" shape="circle" 
                            :name="tem.id" :checked="tem.checked">
                        </u-checkbox>
                        <uni-item :listItem="tem.list"></uni-item>
                    </u-swipe-action-item>
                </u-swipe-action>
            </u-checkbox-group>
            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop"  @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />
        </view>


        <!-- 操作 -->
        <u-popup class="uni-add" :show="popupShow" :duration="100" @close="popupShow=false" @open="popupShow=true"
            :overlay="false">
            <view class="popup-content u-flex u-p-30">
                <u-button class="btn" text="删除" @tap="batchFn('del')"></u-button>
                <u-button class="btn" type="primary" text="提交" @tap="batchFn('submit')"></u-button>
            </view>
		</u-popup>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import {mapGetters,mapMutations} from 'vuex'
export default {
    data() {
        return {
            systemInfo: uni.getStorageSync('systemInfo'),// 设备信息
            popupShow: false, // 默认不显示批量操作菜单栏
            userInfo: uni.getStorageSync("userInfo"), // 用户信息
            // 提交删除查看按钮
            options1: [ 
                {
                    text: '提交',
                    style: {
                        backgroundColor: '#3c9cff',
                        fontSize: '26rpx'
                    }
                }, 
                {
                    text: '删除',
                    style: {
                        backgroundColor: '#f56c6c',
                        fontSize: '26rpx'
                    }
                },
                {
                    text: '修改',
                    style: {
                        backgroundColor: '#4cd964',
                        fontSize: '26rpx'
                    }
                }, 
            ],
            options2: [ 
                {
                    text: '查看',
                    style: {
                        backgroundColor: '#4cd964',
                        fontSize: '26rpx'
                    }
                }, 
            ],
            disabled: false, // 默认不禁用滑动单元格
            selectData:[], // 下拉选择
            parameter:{ // 参数
                searchTerminal: 'PC',
                deptId: uni.getStorageSync("userInfo").deptId, // 部门编号
                gcbh: uni.getStorageSync("userInfo").ssgcbh // 项目编号
            },
            selectPrameter:{
                deptId: '', // 所属企业(部门编号)
                ywzt: '', // 业务状态
            },
            jurisdiction:{ // 页面数据
                type: 'team',
                title: '新增班组',
                api: '', // 业务列表
                listItem: [],
                delApi: '', // 业务删除
                submitApi: '', // 业务提交
                addUrl: '',
            },
            // 分页相关
            paging:{
                pageNum: 1,
                pageSize: this.$config.pageSize,
            },
            page:{
                scrollTop: 0,
                status: 'loadmore',
                total: 0,
                list: [], 
            },
            batchIds:'', // 批量操作的Id
        }
    },

    // 页面滚动
    onPageScroll(e){
        this.page.scrollTop = e.scrollTop
    },
    // 页面滚动到底部触发
    onReachBottom(){
        if( this.page.list.length < this.page.total ){
            this.paging.pageNum += 1
            this.page.status = 'loading'
            this.getList()
        }else{
            this.page.status = 'nomore'
        }
    },

    onReady(){},

    onLoad(option) {
        this.jurisdiction.type = option.type
        switch (option.type) {
            case 'team':
                this.jurisdiction.title = '新增班组' // 标题
                this.jurisdiction.api = this.$apis.ywAddGroupList // 列表API
                this.jurisdiction.listItem = [ // 展示的字段
                    { field:'deptName', title:'所属单位',span:12, value:'安薪乐' },
                    { field:'id', title:'业务编号',span:12, value:'安薪乐' },
                    { field:'createTime', title:'申请日期',span:7, value:'安薪乐' },
                    { field:'createUser', title:'申请人',span:5, value:'安薪乐' },
                    { field:'bzmc', title:'班组名称',span:7, value:'安薪乐' },
                    { field:'ywzt', title:'业务状态',span:5, value:'安薪乐' },
                ]
                this.jurisdiction.delApi = this.$apis.addGroupListDel // 删除API
                this.jurisdiction.submitApi = this.$apis.addGroupListSubmit // 提交API
                this.jurisdiction.addUrl = '/pages/team-bag/addEdit' // 新增班组页面地址
                break;
            case 'leave': 
                this.jurisdiction.title = '人员离场' // Title
                this.jurisdiction.api = this.$apis.memberLeaveList // 列表API
                this.jurisdiction.listItem =  [ // 展示的字段
                    { field: 'deptName', title:'所属单位', span:12, value:'安薪乐' },
                    { field: 'id', title:'业务编号', span:12, value:'rylc_001' },
                    { field: 'lcsj', title:'离场时间', span:7, value:'1970-01-01' },
                    { field: 'lcrs', title:'离场人数', span:5, value:0 },
                    { field: 'createTime', title:'申请日期', span:7, value:'1970-01-01' },
                    { field: 'createUser', title:'申请人', span:5, value:'安薪乐' },
                    { field: 'ywzt', title:'业务状态', span:12, value:'待审核' },
                ]
                this.jurisdiction.delApi = this.$apis.memberLeaveDel // 删除API
                this.jurisdiction.submitApi = this.$apis.memberLeaveSubmit // 提交API
                this.jurisdiction.addUrl = '/pages/team-bag/addEditLeave' // 新增、修改页面
                break;
            case 'transfer':
                this.jurisdiction.title = '人员调岗' // 标题
                this.jurisdiction.api = this.$apis.memberTransferList // 列表API
                this.jurisdiction.listItem = [ // 展示的字段
                    { field: 'deptName', title:'所属单位', span:12, value:'安薪乐' },
                    { field: 'id', title:'业务编号', span:12, value:'安薪乐' },
                    { field: 'groupname', title:'班组名称', span:7, value:'安薪乐' },
                    { field: 'groupleadername', title:'班组长', span:5, value:'安薪乐' },
                    { field: 'createTime', title:'申请日期', span:7, value:'安薪乐' },
                    { field: 'createUser', title:'申请人', span:5, value:'安薪乐' },
                    { field: 'ywzt', title:'业务状态', span:12, value:'待审核' },
                ]
                this.jurisdiction.delApi = this.$apis.memberTransferDel // 删除API
                this.jurisdiction.submitApi = this.$apis.memberTransferSubmit // 提交API
                this.jurisdiction.addUrl = '/pages/team-bag/addEditTransfer' //  新增人员调岗页面地址
                break;
            case 'foreman':
                this.jurisdiction.title = '班组长变更' // title
                this.jurisdiction.api = this.$apis.groupChangeList // 列表API
                this.jurisdiction.listItem =  [ // 展示的字段
                    { field: 'deptName', title:'所属单位', span:12, value:'王五' },
                    { field: 'id', title:'业务编号', span:12, value:'男' },
                    { field: 'createTime', title:'申请日期', span:7, value:'张三' },
                    { field: 'createUser', title:'申请人', span:5, value:'513701192145251218' },
                    { field: 'bzmc', title:'班组名称', span:7, value:'男' },
                    { field: 'ywzt', title:'业务状态', span:5, value:'班组名称' },
                ]
                this.jurisdiction.delApi = this.$apis.groupChangeDel // 删除API
                this.jurisdiction.submitApi = this.$apis.groupChangeSubmit // 提交API
                this.jurisdiction.addUrl = '/pages/team-bag/addEditForeman' // 新增编辑班组长变更页面
                break;
            case 'autonym':
                this.jurisdiction.title = '实名认证' // 标题
                this.jurisdiction.api = this.$apis.autonymList // 列表API
                this.jurisdiction.listItem = [ // 展示的字段
                    { field: 'deptName', title:'所属单位', span:12, value:'安薪乐' },
                    { field: 'id', title:'业务编号', span:12, value:'1970-01-01' },
                    { field: 'bzmc', title:'班组名称', span:12, value:'安薪乐' },
                    { field: 'zjhm', title:'身份证', span:7, value:'110101197001010001' },
                    { field: 'xm', title:'姓名', span:5, value:'安薪乐' },
                    { field: 'createTime', title:'申请时间', span:7, value:'1970-01-01' },
                    { field: 'createUser', title:'申请人', span:5, value:'安薪乐' },
                    { field: 'ywzt', title:'业务状态', span:6, value:'待审核' },
                ],
                this.jurisdiction.delApi = this.$apis.autonymDel // 删除API
                this.jurisdiction.submitApi = this.$apis.autonymSubmit // 提交API
                this.jurisdiction.addUrl = '/pages/certification-bag/add-autonym' // 新增实名认证页面地址
                break;
            case 'enter':
                this.jurisdiction.title = '人员进场' // title
                this.jurisdiction.api = this.$apis.enterList // 列表API
                this.jurisdiction.listItem =  [ // 展示的字段
                    { field: 'deptName', title:'所属单位' , span:12, value:'王五' },
                    { field: 'id', title:'业务编号' , span:12, value:'班组名称' },
                    { field: 'pqrq', title:'派遣时间' , span:7, value:'513701192145251218' },
                    { field: 'pqrs', title:'派遣人数' , span:5, value:'男' },
                    { field: 'createTime', title:'申请日期' , span:7, value:'班组名称' },
                    { field: 'createUser', title:'申请人' , span:5, value:'班组名称' },
                    { field: 'ywzt', title:'业务状态' , span:12, value:'待审核' },
                ],
                this.jurisdiction.delApi = this.$apis.enterDel // 删除API
                this.jurisdiction.submitApi = this.$apis.enterSubmit // 提交API
                this.jurisdiction.addUrl = '/pages/team-bag/addEditEnter'
                break;
        }
        // 所属企业=>业务状态=>业务列表
        this.getEntList()
    },

    onShow(){
        this.paging.pageNum = 1
        this.page.list = []
        this.getList()
    },

    methods: {
        ...mapMutations(['setLeaveStaff','setTransferGroup','setSelectTransferGroup','setForemanGroup','setSelectForeman','emptyAutonymSubmitData']),

        // 返回
        back(){
            uni.navigateBack()
        },
        // 新增
        add(){
            if( this.jurisdiction.type == 'leave' ) this.setLeaveStaff({})
            if( this.jurisdiction.type == 'transfer' ){
                this.setTransferGroup({})
                this.setSelectTransferGroup({})
            } 
            if( this.jurisdiction.type == 'foreman' ){
                this.setForemanGroup({})
                this.setSelectForeman({})
            }
            if( this.jurisdiction.type == 'autonym' ) this.emptyAutonymSubmitData({})
            uni.navigateTo({ url: this.jurisdiction.addUrl })
        },
        // 批量操作
        batch(){
            this.disabled = !this.disabled
            if( !this.disabled ){ // 取消批量操作
                this.page.list.map((v,i)=>{
                    v.checked = false
                })
                this.popupShow = false
            }
        },
        // 搜索
        search(){
            uni.$u.toast('开发中')
        },


        // 下拉选择框值的改变
        select(e){
            this.selectPrameter[e.type] = e.value
            this.paging.pageNum = 1
            this.page.list = []
            this.getList()
        },


        // 所属企业=>业务状态
        getEntList(){
            this.$request(this,this.$apis.belongEntList,this.parameter).then(res=>{
                const arr = [ {dictLabel: '全部单位', dictValue: ''} ]
                res.map((v,i)=>{ arr.push( { dictLabel:v.deptName, dictValue:v.deptId } ) })
                const obj = {  
                    label: arr[0].dictLabel, value: arr[0].dictValue, show: false, type: 'deptId', list: []
                }
                arr.map((v, i) => {
                    obj.list.push({ label: v.dictLabel, value: v.dictValue })
                })
                this.selectData.splice(0,1,obj)
                // 业务状态（字典值）
                this.$tools.ywztFn(this,res=>{
                    this.selectData.splice(1,1,res)
                })
            }).then()
        },
        // 获取业务列表
        getList(){
            this.page.status = 'loading'
            let parameter = Object.assign(this.parameter,this.selectPrameter,this.paging)
            this.$request(this,this.jurisdiction.api,parameter).then(res=>{
                this.page.total = res.total
                let rows = res.rows ? res.rows : res.data
                if( rows.length ){
                    this.page.status = 'loadmore'
                    rows.map((v,i)=>{
                        const temporaryData = JSON.parse(JSON.stringify(this.jurisdiction.listItem)) 
                        temporaryData.map((a,b)=>{
                            switch (a.field) {
                                case 'zjhm':
                                    a.value = this.$tools.formatIdentity(v[a.field])
                                    break;
                                case 'createUser':
                                    a.value = v[a.field].match(/\[(\S*)\]/)[1]
                                    break;
                                case 'ywzt':
                                    a.value = v[a.field]==0?'办结':v[a.field]==1?'临时':v[a.field]==2?'注销':v[a.field]==3?'办理中':'签收中'
                                    break;
                                default:
                                    a.value = v[a.field]?v[a.field]:'暂无数据'
                                    break;
                            }
                        })
                        this.page.list.push({
                            id: v.id,
                            checked: false,
                            list: temporaryData,
                            options: v.ywzt == 1 ? this.options1 : this.options2, // 左滑显示的操作功能按钮数据
                            status: v.ywzt == 1 ? 1 : 0 // 只有未提交才有提交删除查看以及批量操作功能
                        })
                    })
                }else{
                    this.page.status = 'nomore'
                    uni.$u.toast('未查询到更多相关数据')
                }
            }).then()
        },



        // 滑动单元格按钮
        click(e){
            const status = e.name.split('&')[0]
            const id = e.name.split('&')[1]
            // const index = e.name.split('&')[2] 暂时作废
            if( status == 1 ){ // 临时
                if( e.index == 0 ) { // 提交
                    this.submit(id)
                }
                if( e.index == 1 ) { // 删除
                    this.$tools.showModal('提示','是否确认删除?',res=>{
                        this.del(id)
                    })
                }
                if( e.index == 2 ) { // 修改
                    if( this.jurisdiction.type == 'autonym' ){
                        uni.navigateTo({ url: '/pages/certification-bag/add-autonym?id='+id })
                    }else{
                        uni.navigateTo({ url: this.jurisdiction.addUrl+'?id='+id })
                    }
                }
            }else{ // 查看
                uni.navigateTo({ url: '/pages/examine-bag/detail?status=1&type='+this.jurisdiction.type+'&id='+id })
            }
        },
        // 批量删除&批量提交
        batchFn(type){
            if( type == 'submit' ){
                this.submit(this.batchIds)
            }else{
                this.del(this.batchIds)
            }
        },


        // 删除
        del(id,index){
            uni.showLoading({ title:'删除中' })
            let api = JSON.parse(JSON.stringify(this.jurisdiction.delApi))
            let isJoint = 1 // Id默认是不拼接到url后面的
            switch ( this.jurisdiction.type ) {
                case 'autonym':
                    isJoint = 0
                    api.url+=id
                    break;
                case 'leave':
                    isJoint = 0
                    api.url+=id
                    break;
                case 'enter':
                    isJoint = 0
                    api.url+=id
                    break;
                default: // team、transfer、foreman
                    isJoint = 1
                    break;
            }
            this.$request(this,api,isJoint?{id:id}:{}).then(res=>{
                // 隐藏可以批量操作视图
                this.page.list.map((v,i)=>{
                    v.checked = false
                })
                this.disabled = false
                this.popupShow = false
                // 重新获取数据
                this.paging.pageNum = 1
                this.page.list = []
                this.getList()
            }).then()
        },
        // 提交
        submit(id,index){
            uni.showLoading({ title:'提交中' })
            let api = JSON.parse(JSON.stringify(this.jurisdiction.submitApi))
            let isJoint = 1 // Id默认是不拼接到url后面的
            switch ( this.jurisdiction.type ) {
                case 'autonym':
                    isJoint = 0
                    api.url+=id
                    break;
                case 'leave':
                    isJoint = 0
                    api.url+=id
                    break;
                case 'enter':
                    isJoint = 0
                    api.url+=id
                    break;
                default: // team、transfer、foreman
                    isJoint = 1
                    break;
            }
            this.$request(this,api,isJoint?{id:id}:{}).then(res=>{
                // 隐藏可以批量操作视图
                this.page.list.map((v,i)=>{
                    v.checked = false
                })
                this.disabled = false
                this.popupShow = false
                // 重新获取数据
                this.paging.pageNum = 1
                this.page.list = []
                this.getList()
            }).then()
        },


        // 复选框改变
        checkboxChange(e){
            this.batchIds = e.join(',')
            if( e.length != 0 ){
                this.popupShow = true
            }else{
                this.popupShow = false
            }
        },

        // 回到顶部
        toTop(){
            uni.pageScrollTo({ scrollTop: 0, duration: 300 })
        }
    }
}
</script>

<style scoped lang="scss">
    .content{
        .uniselect{
            width: 100%;
            position: fixed !important;
            left: 0;
        }
        .tem{
            box-shadow: 0px 4px 8px -8px rgba(0, 0, 0, 0.2);
        }
        /deep/.u-swipe-action-item{
            // background: #eee;
            // border-radius: 16rpx;
            // .u-swipe-action-item__right{
            //     margin-right: 48rpx;
            //     flex-direction: column;
            //     justify-content: center;
            //     align-items: center;
            //     .u-swipe-action-item__right__button{
            //         height: 50rpx;
            //         border-radius: 36rpx;
            //         margin: 2rpx 0;
            //     }
            // }
            .u-swipe-action-item__content{
                flex-direction: row;
                .u-checkbox__icon-wrap{
                    margin: 0;
                }
            }
        }
    }
</style>
